<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../jquery-3.4.1.min.js"></script>
<script>
  //$(":checkbox[value=101]").click(xxxx);
	 $(function(){
		 $(":button").click(function() {
			var mark=$("button").prop("checked");
			if(mark=true){
				$("#menu input").prop("checked",true);
			}
	 ;})
	 $(":reset").click(function(){
		 var mark=$("reset").prop("checked");
		 if(mark=true){
			 $("#menu input").prop("checked",false);
		 }
	 ;})
	 $("h2 :checkbox").each(function(i, d) {
	 	$(d).click(function() {
	 		$(this).parent().next().children().each(function(ii, dd) {
	 			dd.checked = d.checked;
	 		})
	 	})
	 })
	 
	 $("p :checkbox").click(function() {
	 	let index = 0;
	 	$(this).parent().children().each(function(i, d) {
	 		if (d.checked == false) {
	 			index++;
	 		}
	 	})
	 	if (index == $(this).parent().children().length) {
	 		$(this).parent().prev().children()[0].checked = false;
	 	} else {
	 		$(this).parent().prev().children()[0].checked = true;
	 	}
	 ;})
	 ;})
</script>
<title>无标题文档</title>
</head>

<body>
<div id="menu">
 <h2><input type="checkbox" name="role" value="101"/>系统管理</h2>
 <p>
 	<input type="checkbox" name="role" value="101001"/>用户管理
    <input type="checkbox" name="role" value="101002"/>参数管理
    <input type="checkbox" name="role" value="101003"/>权限管理
    <input type="checkbox" name="role" value="101004"/>日常管理
    <input type="checkbox" name="role" value="101005"/>财务管理
 </p>
 <hr/>
 <h2><input type="checkbox" name="role" value="102"/>鲜花订单管理</h2>
 <p>
 	<input type="checkbox" name="role" value="102032"/>增加订单
    <input type="checkbox" name="role" value="102013"/>订单发货
    <input type="checkbox" name="role" value="102015"/>在线结算
    <input type="checkbox" name="role" value="102016"/>原料管理 
 </p>
 <hr/>
 <h2><input type="checkbox" name="role" value="103"/>客户管理</h2>
 <p>
 	<input type="checkbox" name="role" value="103032"/>增加用户
    <input type="checkbox" name="role" value="103032"/>查找用户
    <input type="checkbox" name="role" value="103012"/>用户维护
    <input type="checkbox" name="role" value="103012"/>生日祝贺
    <input type="checkbox" name="role" value="103012"/>删除用户
 </p>

 <hr/>
 <h2><input type="checkbox" name="role" value="104"/>任务管理</h2>
 <p>
 	<input type="checkbox" name="role" value="104032"/>增加任务
    <input type="checkbox" name="role" value="104032"/>指定用户
    <input type="checkbox" name="role" value="104012"/>取消维护
    <input type="checkbox" name="role" value="104012"/>任务结算
    <input type="checkbox" name="role" value="104012"/>删除任务
 </p>
</div>
 <p>
  <input type="button" value="全选"/>
  <input type="submit" value="提交"/>
  <input type="reset" value="重置"/>
 </p>
 <hr/>

 <p>
   1:实现  全选 全不选 功能（通过点击 全选 按钮）<br/>
   2：选中h2中的大项，对应后面的小项 全部选中；取消选中，则小项全部取消；<br/>
   3:选中小项，则其对应的大项选中，如果小项都未选中，则大项不选。<br/>
   4：不能采用固定value 的方式，比如$(":checkbox[value=1001]")这样的格式
 </p>
</body>
</html>